<template>
  <div class="container" v-if="loaded">
      <div v-if="errmsg" class="errmsg">
        {{errmsg}}
    </div>
    <div v-else>
      <div class="p1">
          <div class="p1-title">
              选择发票类型
          </div>
          <div class="invoice-type">
              电子发票
          </div>
      </div>
      <div class="hrgray"></div>
      <div class="border-b p30 flex">
          <div class="blue-line"></div>
          <div class="flex-con invoice-title">
              发票详情
          </div>
      </div>
      <div class="border-b list-item flex">
          <div class="label">
              抬头类型
          </div>
          <div class="flex-con flex">
              <div class="flex" @click="togglePurchaseType(1)">
                  <div class="checkbtn" :class="{checked:formData.purchaseType==1}"></div>
                  <div>企业单位</div>
              </div>
              <div class="flex" style="margin-left:0.8667rem;" @click="togglePurchaseType(0)">
                  <div class="checkbtn" :class="{checked:formData.purchaseType==0}"></div>
                  <div>个人/非企业单位</div>
              </div>
          </div>
      </div>
      <label class="border-b list-item flex">
          <div class="label">
              发票抬头
          </div>
          <div class="flex-con">
              <input type="text" v-model="formData.shopinfo" placeholder="请填写发票抬头">
          </div>
       </label>
       <label class="border-b list-item flex" v-if="formData.purchaseType==1">
          <div class="label">
              税&nbsp;&nbsp;&nbsp;&nbsp;号
          </div>
          <div class="flex-con">
              <input type="text" v-model="formData.taxid" maxlength="64" placeholder="填写纳税人识别号">
          </div>
       </label>
       <label class="border-b list-item flex">
          <div class="label">
              发票内容
          </div>
          <div class="flex-con">
              商品明细
          </div>
       </label>

       <label class="border-b list-item flex">
          <div class="label">
              发票金额
          </div>
          <div class="flex-con price-money">
                {{money}}元
          </div>
       </label>
        <div class="hrgray"></div>

        <div class="border-b p30 flex">
          <div class="blue-line"></div>
          <div class="flex-con invoice-title">
              接收方式
          </div>
      </div>
      <label class="border-b list-item flex">
          <div class="label">
              电子邮箱
          </div>
          <div class="flex-con">
              <input type="text" v-model="formData.email" placeholder="用于向您发送电子发票">
          </div>
       </label>
       <div class="btn-area text-center">
           <div class="save-btn" @click="doSubmit"> 
               保存提交
           </div>
       </div>
       </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        purchaseType: 0,
        shopinfo: "",
        taxid: "",
        comment: "",
        invoiceAmount: "",
        email: ""
      },
      errmsg: "",
      loaded: false,
      info: {},
      money: ""
    };
  },
  created() {
    this.money = this.$route.query.money;
    if (this.money && this.money > 0) {
      this.money = this.$route.query.money;
       this.loaded = true;
    } else {
      this.showLoading();
      this.$post("/api/invoice/parse_param", this.$route.query)
        .then(data => {
          this.money = data.invoiceAmount;
          this.hideLoading();
          this.loaded = true;
          this.invoiceIds = data.invoiceId.join(",");
        })
        .catch(_ => {
          this.loaded = true;
          this.hideLoading();
          if (_.errcode == 300) {
            //发票已开具
            // this.$router.replace('/myinvoicedetail?id=');
            this.errmsg = _.msg;
          } else {
            this.errmsg = _.msg;
          }
        });
    }
    this.$post("/api/get_my_invoice").then(data => {
      this.formData.shopinfo = data.invoice || "";
      this.formData.taxid = data.taxid || "";
      this.formData.email = data.email || "";
    });
  },
  methods: {
    togglePurchaseType(type) {
      this.formData.purchaseType = type;
    },
    doSubmit() {
      if (this.formData.purchaseType === null) {
        this.$toast("请选择抬头类型");
        return;
      }
      if (!this.formData.shopinfo.trim()) {
        this.$toast("请填写发票抬头");
        return;
      }
      if (this.formData.purchaseType == 1) {
        if (!this.formData.taxid.trim()) {
          this.$toast("请填写税号");
          return;
        }
      }
      this.showLoading();
      this.formData.orderRecordId = this.$route.query.ids;
      this.formData.invoiceIds = this.invoiceIds;
      this.$post("/api/invoice/open", this.formData)
        .then(data => {
          this.$toast("发票开具提交成功");
          // this.$router.go(-1);
          // location.href = data;
          this.$router.push("/myinvoices");
          this.hideLoading();
        })
        .catch(_ => {
          this.hideLoading();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.p1 {
  padding: 0.6rem 0.4rem;
  .p1-title {
    padding-bottom: 0.6133rem;
    font-size: 0.3733rem;
    color: #333;
  }
  .invoice-type {
    font-size: 0.3733rem;
    color: #34a359;
    width: 3.8667rem;
    height: 1.3467rem;
    line-height: 1.3467rem;
    text-align: center;
    border: solid 1px #34a359;
  }
}
.hrgray {
  height: 0.24rem;
  background-color: #ebebeb;
}
.blue-line {
  width: 0.08rem;
  height: 0.6133rem;
  background-color: #28b46b;
  margin-right: 0.2533rem;
}
.invoice-title {
  font-size: 0.4rem;
  color: #222222;
}
.list-item {
  font-size: 0.3733rem;
  color: #333;
  padding: 0.4267rem 0.3867rem;
  color: #333333;
  .label {
    width: 2.3733rem;
    font-size: 0.3733rem;
  }
  input {
    width: 100%;
    font-size: 0.32rem;
  }
  .checkbtn {
    width: 0.3467rem;
    height: 0.3467rem;
    border: 1px solid #ff2a2a;
    margin-right: 0.2133rem;
    &.checked {
      background-color: #ff2a2a;
      background-image: url("../../assets/icons/usercenter/okchecked.png");
      background-size: 0.2667rem 0.2rem;
      background-position: center center;
      background-repeat: no-repeat;
    }
  }
}
.price-money {
  color: #ff2a2a;
}
.btn-area {
  padding-top: 0.7333rem;
  padding-bottom: 0.7333rem;
  .save-btn {
    width: 5rem;
    height: 0.9067rem;
    line-height: 0.88rem;
    margin: 0 auto;
    border: 2px solid #ff2a2a;
    color: #ff2a2a;
    border-radius: 0.1333rem;
    font-size: 0.3733rem;
    text-align: center;
  }
}
.errmsg {
  padding: 0.4rem;
  font-size: 0.5rem;
  text-align: center;
  padding-top: 3rem;
}
</style>

